<template>
  <div class="hello">
    <App></App>
    <x-header>修改密码</x-header>

    <form>
      <group label-width="5.5em" label-margin-right="2em" label-align="right">
        <x-input title="输入旧密码" type="password" :placeholder="oldPwdPlaceholder" novalidate :icon-type="oldPwdIconType" v-model="oldPwd" required></x-input>
        <x-input title="输入新密码" type="password" :placeholder="newPwdPlaceholder" novalidate :icon-type="newPwdIconType" v-model="newPwd" required></x-input>
        <x-input title="确认新密码" type="password" :placeholder="newPwd2Placeholder" novalidate :icon-type="newPwd2IconType" v-model="newPwd2" required></x-input>
      </group>
      <box gap="10px 10px">
      <x-button type="primary" @click.native="updatePwd" action-type="button">提交</x-button>
      </box>
    </form>
  </div>
</template>
<script>
import App from '../../App'
import { XHeader, TransferDom, Cell, CellBox, CellFormPreview, Group, Badge, XButton, Box, XInput } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'ApiCenter',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge,
    XButton,
    Box,
    XInput
  },
  data () {
    return {
      oldPwd: '',
      newPwd: '',
      newPwd2: '',
      oldPwdIconType: '',
      newPwdIconType: '',
      newPwd2IconType: '',
      oldPwdPlaceholder: '必填',
      newPwdPlaceholder: '必填',
      newPwd2Placeholder: '必填'
    }
  },
  methods: {
    updatePwd () {
      var oldPwdVal = this.oldPwd
      var newPwdVal = this.newPwd
      var newPwd2Val = this.newPwd2
      if (Object.is(oldPwdVal, '')) {
        this.oldPwdIconType = 'error'
        this.oldPwdPlaceholder = '旧密码不能为空'
      }
      if (Object.is(newPwdVal, '')) {
        this.newPwdIconType = 'error'
        this.newPwdPlaceholder = '新密码不能为空'
      }
      if (Object.is(newPwd2Val, '')) {
        this.newPwd2IconType = 'error'
        this.newPwd2Placeholder = '确认新密码不能为空'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

